<template>
    <div :class="containerClass" id="admin-container">
        <div v-if="loading" class="admin-container-loading">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
                <rect x="2" y="7.6416" width="4" height="14.7168" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="1.2s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="1.2s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="1.2s" repeatCount="indefinite"></animate>
                </rect>
                            <rect x="10" y="5.1416" width="4" height="19.7168" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="1.2s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="1.2s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="1.2s" repeatCount="indefinite"></animate>
                </rect>
                            <rect x="18" y="7.3584" width="4" height="15.2832" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="1.2s" repeatCount="indefinite"></animate>
                                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="1.2s" repeatCount="indefinite"></animate>
                                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="1.2s" repeatCount="indefinite"></animate>
                </rect>
            </svg>
        </div>

        <template v-else>
            <template v-if="!hiddenTitle">
                <k-page-header v-if="titleText" :content="titleText"
                               @back="goBack"
                               :show-back="showBack">
                </k-page-header>
                <div class="admin-container-line" v-if="titleText"></div>
            </template>
            <div class="admin-container-panel">
                <slot/>
            </div>
        </template>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import KPageHeader from '@/components/page-header.vue';

@Component({ name: 'AdminContainer',
    components: { KPageHeader }
})
export default class AdminContainer extends Vue {
    // 是否加载状态
    @Prop({ type: Boolean, default: false }) readonly loading!: boolean;

    // 背景白色
    @Prop({ type: Boolean, default: true }) readonly bgFff!: boolean;

    // 标题,留空时使用路由meta.title
    @Prop({ type: String }) readonly title!: string;

    // 是否显示返回键
    @Prop({ type: Boolean, default: false }) readonly showBack!: boolean;

    // 隐藏标题
    @Prop({ type: Boolean, default: false }) readonly hiddenTitle!: boolean;

    get containerClass(): string[] {
        let arr: string[] = [
            'admin-container'
        ];
        if (this.bgFff) {
            arr.push('admin-container-bg-fff');
        }
        return arr;
    }

    goBack() {
        this.$router.back();
    }

    get titleText(): string {
        if (this.title) {
            return this.title;
        }
        return this.$route.meta?.title;
    }
}
</script>

<style scoped lang="scss">
.admin-container {
    margin: 20px 24px;
    padding: 20px;
    box-sizing: border-box;
    &-loading {
        text-align: center;
        display: block;
        padding: 100px 0;
    }
    &-bg-fff {
        background: #fff;
    }
    &-title {
        border-bottom: solid 1px #dfdfdf;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    &-line {
        margin: 20px 0;
        height: 1px;
        background: #f3f3f3;
    }
}
</style>
